<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script type="text/javascript" src="../lib/Queue.class.js"></script>
	<script type="text/javascript" src="../lib/jquery.CL_Valitator.js"></script>
	<style>

		body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,lengend,button,input,textarea,th,td{margin:0;padding:0;}
		body,button,input,select,textarea{font:12px/1.5 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
		h1{font-size:18px;}
		h2{font-size:16px;}
		h3{font-size:14px;}
		h4,h5,h6{font-size:100%;}
		address,cite,dfn,em,var{font-style:normal;}
		code,kbd,pre,samp,tt{font-family:"Courier New",Courier,monospace;}
		small{font-size:12px;}
		ul,ol{list-style:none;}
		a{text-decoration:none;}
		a:hover{text-decoration:underline;}
		abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help;}
		q:before,q:after{content:'';}
		legend{color:#000;}
		fieldset,img{border:none;}
		button,input,select,textarea{font-size:100%;}
		table{border-collapse:collapse;border-spacing:0;}
		hr{border:none;height:1px;}
		html{overflow-y:scroll;}

		.ui-form dl{*zoom:1; margin: 5px 0;}
		.ui-form dl:before,.ui-form dl:after{display:table;content:"";line-height:0;}
		.ui-form dl:after{clear:both;}
		.ui-form dt{width: 70px;float: left;text-align: right;line-height: 28px;}
		.ui-form dd{width: 580px;float: left;}


		.ui-form-text{border: 1px solid #d3d3d3;padding: 3px 5px;min-width: 1em;height: 20px;line-height: 20px;background-color: #fff;}
		.ui-form-text:focus{outline: none;}
		.ui-form-textGray:focus { border-color:#d3d3d3; box-shadow: 0 0 3px rgba(0,0,0,.3) }
		.ui-form-textDisabled{background-color: #EBEBE4;}

		.ui-form-button { padding: .35em 1.35em; font-size: 14px;  border-width: 0; border-radius: .3em; cursor: pointer; *overflow: visible;}
		.ui-form-button:focus { outline: none; }
		.ui-form-buttonRed { background-color: #F1273A;  color: #fff; }
		.ui-form-buttonRed:hover { background-color: #BF1C2C; }
		.ui-form-buttonDisabled { background-color: #999; color: #fff; cursor: default; }
		.ui-form-buttonDisabled:hover { background-color: #999; color: #fff; }

		.ui-form-show{display: none;margin-left: 5px;*zoom: 1;*height: 28px;*line-height: 28px;*vertical-align: top;}
		.ui-form-show img{vertical-align: middle;}

		.ui-form-statusRed  {color: #F1273A;}
		.ui-form-statusGreen{color: #1BB974;}
		.ui-form-statusBlue {color: #3366CC;}
	</style>
</head>
<body>
	<form action="#" class="ui-form" method="get">
		
		<dl>
			<dt>用户名：</dt>
			<dd><input class="ui-form-text ui-form-textGray J_username" type="text" name="username"><span class="ui-form-show J_tip"></span></dd>
		</dl>
		<dl>
			<dt>邮箱：</dt>
			<dd><input class="ui-form-text ui-form-textGray J_email" type="text" name="email"><span class="ui-form-show J_tip"></span></dd>
		</dl>
		<dl>
			<dt>密码：</dt>
			<dd><input class="ui-form-text ui-form-textGray J_password" type="password" name="password"><span class="ui-form-show J_tip"></span></dd>
		</dl>
		<dl>
			<dt>确认密码：</dt>
			<dd><input class="ui-form-text ui-form-textGray ui-form-textDisabled J_repassword" type="password" name="repassword" disabled="disabled"><span class="ui-form-show J_tip"></span></dd>
		</dl>
		<dl>
			<dt>&nbsp;</dt>
			<dd><input type="submit" value="不可提交" class="ui-form-button ui-form-buttonRed ui-form-buttonDisabled J_submit"></dd>
		</dl>
	</form>


	<script>
	/*
	首先，咱们先规范一下词语：
	$(".J_form").CL_Valitator({
		......
		rules： {......}
	})
	$(".J_form")选择器选中的节点，我们称呼为：【顶点】
	函数里的参数，我们称呼为：【顶点配置】
	【顶点配置】中的rules我们称呼为【元素规则字典】

	$(".J_form").CL_Valitator(".J_username", {......})
	第一个参数".J_username"选择器选中的节点，我们称呼为：【元素】
	第二个参数我们称呼为：【元素配置】

	$(".J_form").CL_Valitator(".J_username", [......])
	第二个参数与上文的区别在于它是一个数组而非对象，我们称呼为：【规则组】
	事实上，【规则组】是元素配置的一个项

	$(".J_form").CL_Valitator(".J_username", [
		{......}
	]);
	【规则组】中的对象，我们称呼为：【规则】
	*/


	// 缓存起来可以避免浏览器重复地加载图片，让加载图显示的速度更快
	var loadImg = $('<img src="http://www.lanrentuku.com/img/allimg/1212/5-121204193934-51.gif" />');

	$(".ui-form").CL_Valitator({
		// 获得焦点时清空提示信息，this指获得焦点的【元素】
		onfocus:function(){
			$(this).next(".J_tip").html('').hide();
		},
		// 验证失败时触发，this指向验证失败的【元素】
		onerror:function(msg){
			if(msg){
				$(this).next(".J_tip").removeClass("ui-form-statusGreen").addClass("ui-form-statusRed").html(msg).show();
			}else{
				$(this).next(".J_tip").hide();
			}
		},
		// 验证正确时触发，this指向验证正确的【元素】
		onsuccess:function(msg){
			if(msg){
				$(this).next(".J_tip").removeClass("ui-form-statusRed").addClass("ui-form-statusGreen").html(msg).show();
			}else{
				$(this).next(".J_tip").hide();
			}
		},
		// 锁定时触发，this指向【顶点】
		onlock:function(){
			$(this).find(".J_submit").addClass("ui-form-buttonDisabled");
		},
		// 解锁时触发，this指向【顶点】
		onunlock:function(){
			$(this).find(".J_submit").removeClass("ui-form-buttonDisabled");
		}
	}).submit(function(){
		$(this).find(".ui-form-button").hasClass('ui-form-buttonDisabled') ? alert("不可提交") : alert("可以提交");
		return false;
	});

	// 设置【元素配置】
	$(".ui-form").CL_Valitator(".J_username", [
		{
			type:"regexp",
			action:/\S+/,
			error:"用户名不能为空"
		}
	]);
	// 重写，修改【元素配置】
	$(".ui-form").CL_Valitator(".J_username", {
		success:"用户名可以使用",
		rules:[
			{
				type:"regexp",
				action:/\S+/,
				error:"请输入用户名。"
			},
			// {
			// 	type:"length",
			// 	action:[6,50],
			// 	lengthAt:true,
			// 	error:"6-50个字符，1个汉字为2个字符。推荐使用中文用户名。"
			// },
			{
				type:"minlength",
				action:6,
				lengthAt:true,
				error:"用户名长度过短，请限制在6-50个字符，1个汉字为2个字符。"
			},
			{
				type:"maxlength",
				action:50 ,
				lengthAt:true,
				error:"用户名长度过长，请限制在6-50个字符，1个汉字为2个字符。"
			},
			{
				type:"regexp",
				action:/\d{5}/,
				lengthAt:true,
				match:false,	// 结果取反，也就是当正则式不匹配时为正确，否则为错误
				error:"用户名中不能包含多个数字，推荐使用中文用户名。"
			},
			// {
			// 	type:"ajax",
			// 	action: "a.php",			// ajax验证地址，服务器将接收到get数据：a.php?username=xxxx，其中xxx为表单的值，post、字段名、额外数据等更多设置请参阅源码中的配置参考
			// 	method: "post",
			// 	name 	: "username",						// 可选，缺省则使用表单name值作为字段名，字符串，发送到服务器的字段名，
			// 	data 	: {},								// 可能需要的额外的补充数据（当post时候需要，get可直接拼接于action）
			// 	net_error: "网络连接失败",					// 网络连接失败时候的错误信息
			// 	// success: "用户名可以注册",				// 设置默认正确信息，缺省时会取表单规则的设置
			// 	onbefore:function(){		// 请求前，提示正在加载
			// 		$(".J_username").next(".J_tip").html('').append(loadImg).show();
			// 	},
			// 	oncomplete: function(data,callback){		// 使用自定义数据格式验证
			// 		try{		// 记住！解析JSON一定要用try
			// 			var ret = $.parseJSON(data);		// 接收到的data是ajax返回的字符串，所以我们需要编译为json，由于不规范的数据对此方法会引发异常，所以使用try控制(建议是务必使用try避免异常)
			// 			if(ret.success){
			// 				callback(true, ret.data);		// 执行回调，回调的方法与callback验证的回调方法一致
			// 			}else{
			// 				callback(false, ret.data);
			// 			}
			// 		}catch(e){
			// 			callback(false,"服务器繁忙，请稍后再试。");		// 数据格式异常，一般是服务器返回错误或者没有返回
			// 		}
			// 	}
			// }
		]
	});
	                                                                                                                                                                                                                                 
	$(".ui-form").CL_Valitator(".J_email", {
		success:"邮箱地址正确。",
		rules:[
			{
				type:"regexp",
				action:/\S+/,
				error:"请输入邮箱地址。"
			},
			{
				type:"regexp",
				action:"email",
				error:"邮箱地址格式有误。"
			}
		]
	});

	// 密码
	$(".ui-form").CL_Valitator(".J_password", {
		success:"密码可以使用",
		onunlock:function(){
			var p = $(".ui-form").find(".J_repassword").prop("disabled",false).removeClass("ui-form-textDisabled");
			p.val() && p.blur();

		},
		onlock:function(){
			$(".ui-form").find(".J_repassword").prop("disabled",true).addClass("ui-form-textDisabled");
		},
		rules:[
			{
				type:"regexp",
				action:/\S+/,
				error:"请设置密码。"
			},
			{
				type:"regexp",
				action:/^[a-zA-Z]+$/,
				match:false,
				error:"密码不能为纯字母。"
			},
			{
				type:"regexp",
				action:/^\d+$/,
				match:false,
				error:"密码不能为纯数字。"
			},
			{
				type:"regexp",
				action:/^_+$/,
				match:false,
				error:"密码不能为纯符号。"
			},
			{
				type:"regexp",
				action:/^[_0-9a-z]{6,20}$/i,
				error:"密码为6-20个字符，请使用字母加数字或下划线组合密码。"
			}
		]
	});

	// 确认密码
	$(".ui-form").CL_Valitator(".J_repassword", [{
		type:"callback",
		// success:"√",					// callback在action回调中还可以自定义提示信息，因此，这里的信息设置是设置默认值
		// error:"两次密码不匹配",		// 同理
		action:function(value,callback){
			if(value!=$(".ui-form").find(".J_password").val())
				callback(false, "两次密码不匹配");			// 当不设置自定义错误信息时候，默认会使用本规则的error配置项
			else
				callback(true, "√");						// 同理
		}
	}]);


	//$(".ui-form").CL_Valitator(".J_email", null);	// 此句可以清除验证

	</script>
</body>
</html>